<template>
  <div class="container">
    <div class="login">
      <h1>登录页</h1>
      <form action="#">
       <div class="box">
        <span>用户名</span> <input type="text" v-model="from.name">
       </div>
       <div class="box">
         <span>密码&nbsp;&nbsp;&nbsp;</span> <input type="password" v-model="from.password">
       </div>
      <button @click.prevent="onSubmit">登录</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'LoginIndex',

  data () {
    return {
      from: {
        name: '',
        password: ''
      }
    }
  },

  mounted () {

  },

  methods: {
    async onSubmit () {
      // root: true 从store根开始
      // this.$store.commit('setRoutes', [], { root: true })
      // 清除之前的路由和实例

      const { data } = await axios.get('aaa.json')
      console.log(data.data, data.points)

      await this.$store.dispatch('filterRoutes', data.data)

      await this.$store.commit('login', data.points)

      console.log(this.$store.state.routes)

      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>

.container{

  min-height: 100%;
  width: 100%;
  background: url('../../assets/common/login.jpg') no-repeat center;
  background-size: cover;
  .login{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    padding: 250px 0;
    width: 800px;
    height: 560px;
    h1{
      margin-bottom: 50px;
      color: #fff;
    }

    .box{
      color: #fff;
      margin-bottom: 10px;
      span{
            width: 100px;
            font-size: 24px;
          }
      input{
           padding: 0 10px;
            font-size: 18px;
            color: #748195;
            width: 400px;
            height: 50px;
            border: none;
            border-radius: 5px;
            outline:none;
          }

    }
    button{
      font-size: 25px;
      margin-top: 20px;
      background-color: #4b66ff;
      border: none;
      border-radius: 5px;
      color: #fff;
      width: 470px;
      height: 60px;
    }
  }
}
</style>
